CSS には vw, vh, vmin, vmax という単位がある

山田直樹

2014.04.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

一般的に CSS で要素の幅や高さを指定する際は px や % といった単位を使いますが、最近のブラウザにおいてはこの他に vw, vh, vmin, vmax という単位を使うことが出来ます。

ついさっきまでこんな単位があるなんて知らなかったので、少し調べてみました。

Viewport パーセンテージ

vw の v は Viewport のイニシャルで、それぞれこのような意味を持っています。

`vw`	viewport width	ビューポートの幅に対する割合
`vh`	viewport height	ビューポートの高さに対する割合
`vmin`	viewport minimum	ビューポートの幅と高さのうち、値が小さい方に対する割合
`vmax`	viewport max	ビューポートの幅と高さのうち、値が大きい方に対する割合

例として以下の様な HTML 構造があったとします。

<body>
  <!-- 画像解像度: 100 x 100 (px)-->
  <img src="images/thumbnail.jpg" />	
</body>

img {
  display: inline-block;
  margin: auto;
  width: 10vw;
}

img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。

Demo - viewport lengthを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

んじゃ今までどおり % 使っていればいいんじゃね？

画像の幅をビューポートの幅に対する割合で指定するのであれば、確かに % で事足ります。しかし % の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、必ずしもビューポートの幅が基準になるとは限りません。もし画像が div といったコンテナ要素の中にあれば、そのコンテナ要素の幅に対する割合で計算されます。

さらに width は必ず親要素の width に対する割合で計算され、height は親要素の height に対する割合で計算されます。

vw, vh にはそのようなプロパティの紐付けがありません。以下のように記述すれば、画像の幅をビューポートの高さを元にした長さに指定することが出来ます。

img {
  display: inline-block;
  margin: auto;
  width: 10vh; /* ビューポートが 600px だとしたら、画像の幅は 60px になる */
}

どんなシーンで使えるか

画像を例にすれば、ページいっぱいの背景画像などでしょうか。モバイル端末は向きによってタテ・ヨコの長さが変わるので、JavaScript で向きの判定処理をして動的にサイズを調整するといったことを自前で作る必要がなくなるかと思います。

対応ブラウザ

	`vw`, `vh`	`vmin`	`vmax`
Chrome	v20.0 ~	v20.0 ~ (with the non-standard name vm)	v26.0 ~
FireFox	v19.0 ~	v19.0 ~	v19.0 ~
Internet Explorer	v9.0 ~	v9.0 ~	v11.0 ~
Opera	v15.0 ~	v15.0 ~	v15.0 ~
Safari	v6.0 ~	v6.0 ~	v6.1 ~
Android Brower	v4.4 ~	v4.4 ~	v4.4 ~
iOS Safari	v6.0 ~	v6.1 ~	v7.0 ~